<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Badge-demo-primary">默认样式</a></li>
                <li><a href="#src-components-Badge-demo-secondary">使用场景</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Badges徽标数</h1>
        <section class="markdown">
            <p>徽标数（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可</p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Badge-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<a href="#">Mailbox <span class="badge">50</span></a>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Badge-demo-primary">默认样式</a></div>
                    <div>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;a href=&quot;#&quot;&gt;Mailbox &lt;span class=&quot;badge&quot;&gt;50&lt;/span&gt;&lt;/a&gt;</code></pre>
                    </div>
                </section>
        </div>
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box" id="src-components-Badge-demo-secondary">
                <section id="J_vue_z0xtotnq5o" class="code-box-demo">
                    <div>
<ul class="nav nav-stacked">
  <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li>
  <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
  <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
  <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li>
</ul>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title">
                        <a href="#src-components-Badge-demo-secondary">使用场景</a>
                    </div>
                    <div>
                        <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;ul class=&quot;nav nav-stacked&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Projects &lt;span class=&quot;pull-right badge bg-blue&quot;&gt;31&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tasks &lt;span class=&quot;pull-right badge bg-aqua&quot;&gt;5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Completed Projects &lt;span class=&quot;pull-right badge bg-green&quot;&gt;12&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Followers &lt;span class=&quot;pull-right badge bg-red&quot;&gt;842&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
    </div>
</article>